<!-- 数字键盘 -->
<template>
  <div
    class="num_keyboard"
    v-if="visible"
  >
    <div
      class="keypad_box"
      @touchmove.stop.prevent=""
    >
      <div
        class="keys"
        @click="phone_keyboard(1)"
      >1</div>
      <div
        class="keys"
        @click="phone_keyboard(2)"
      >2</div>
      <div
        class="keys"
        @click="phone_keyboard(3)"
      >3</div>
      <div
        class="keys"
        @click="phone_keyboard(4)"
      >4</div>
      <div
        class="keys"
        @click="phone_keyboard(5)"
      >5</div>
      <div
        class="keys"
        @click="phone_keyboard(6)"
      >6</div>
      <div
        class="keys"
        @click="phone_keyboard(7)"
      >7</div>
      <div
        class="keys"
        @click="phone_keyboard(8)"
      >8</div>
      <div
        class="keys"
        @click="phone_keyboard(9)"
      >9</div>
      <div
        class="keys"
        @click="phone_keyboard('del')"
      >删除</div>
      <div
        class="keys"
        @click="phone_keyboard(0)"
      >0</div>
      <!-- <div
        class="keys"
        @click="phone_keyboard('cancel')"
      >清空</div> -->
      <div
        class="keys"
        @click="phone_keyboard('.')"
      >.</div>
      <div
        class="keys"
        style="width:33rem;backgroundColor:red;color:#fff"
        @click="phone_keyboard('ok')"
      >确认</div>
    </div>
  </div>
</template>

<script>

export default {
  props:['visible','val'],
  data(){
    return {
      value:''
    }
  },
  watch:{
    val(n,o){
      this.value=n;
    }
  },
  methods:{
    phone_keyboard(val){
      if([0,1,2,3,4,5,6,7,8,9,'.'].includes(val)){
        this.value=`${this.value}${val}`;
      }
      if(val=='del'){
        this.value=this.value.slice(0,-1);
      }
      if(val=='ok'){
        this.value='';
        this.$emit('update:visible',false);
        return;
      }
      if(val=='cancel'){
        this.value='';
      }
      this.$emit('change',this.value);
    }
  }
}
</script>

<style lang="scss" scoped>
.num_keyboard {
  width: 33rem;
  margin: 0 auto;
  .keypad_box {
    width: 34rem;
    padding: 0.5rem;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    position: fixed;
    bottom: 1rem;
    z-index: 9999;
    background-color: #eeeeee;
    .exit-line {
      height: 6rem;
      width: 11rem;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .keys {
      width: 11rem;
      height: 6rem;
      background-color: #ffffff;
      border: 0.5rem solid #ededed;
      color: #000000;
      display: flex;
      justify-content: center;
      align-items: center;
      transition: background-color 0.1s;
      font-size: 2rem;
      font-weight: bold;
    }
    .keys:active {
      background-color: skyblue;
    }
  }
}
</style>

